<template>
  <div class="radio-with-input-render" :style="{ textAlign: fieldData.alignment || 'left', fontSize: getFontSize() }">
    <span v-if="fieldData.label" class="field-label">{{ fieldData.label }}</span>
    
    <span class="radio-options">
      <template v-for="option in fieldData.options" :key="option.value">
        <span class="radio-item">
          <span class="checkbox">{{ fieldData.selected === option.value ? '■' : '□' }}</span>
          <span class="option-text">{{ option.label }}</span>
          
          <!-- 如果选项有输入框，显示输入内容或下划线 -->
          <template v-if="option.showInput">
            <span v-if="option.inputLabel" class="input-label">，{{ option.inputLabel }}</span>
            <span class="input-content">{{ 
              fieldData.selected === option.value ? (fieldData.inputValue || '_'.repeat(20)) : '_'.repeat(20) 
            }}</span>
          </template>
        </span>
      </template>
    </span>
  </div>
</template>

<script setup>
const props = defineProps({
  fieldData: {
    type: Object,
    required: true,
    default: () => ({
      label: '',
      options: [],
      selected: '',
      inputValue: '',
      alignment: 'left'
    })
  }
})

// 字体映射
const getFontSize = () => {
  const map = { '小二': '18pt', '小四': '12pt', '五号': '10.5pt', '小五': '9pt' }
  return map[props.fieldData.fontSize] || '10.5pt'
}
</script>

<style lang="scss" scoped>
.radio-with-input-render {
  font-family: '宋体', SimSun, serif;
  line-height: 1.5;
  
  .field-label {
    margin-right: 8px;
  }
  
  .radio-options {
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  
  .radio-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    
    .checkbox {
      font-family: 'Wingdings', sans-serif;
      font-size: inherit;
      line-height: 1;
    }
    
    .option-text {
      white-space: nowrap;
    }
    
    .input-label {
      margin-left: 4px;
      margin-right: 4px;
    }
    
    .input-content {
      text-decoration: underline;
      text-decoration-style: solid;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
      min-width: 100px;
      display: inline-block;
      padding: 0 4px;
    }
  }
}
</style>
